{% extends 'shop/base.html' %}

{% load static %}
{% load thumbnail %}

{% block title %}
{% if category %}{{ category.name }}{% else %}Products{% endif %}
{% endblock %}
{% block content %}
<div id="sidebar">
    <h3>Categories</h3>
    <ul>
        <li {% if not category %}class="selected"{% endif %}>
            <a href="{% url 'shop:list_products' %}">All</a>
        </li>
        {% for c in categories %}
        <li {% if category.slug == c.slug %}class="selected" {% endif %}>
            <a href="{{ c.get_absolute_url }}">{{ c.name }}</a>
        </li>
        {% endfor %}
    </ul>
</div>
<div id="main" class="product-list">
    <h1>{% if category %}{{ category.name }}{% else %}Products{% endif %}</h1>
    <div class="images">
        {% for product in products %}
        <div class="item">
            <a href="{{ product.get_absolute_url }}">
                <img src="{% if product.image %}{{ product.image.url }}{% else %}{% static 'img/no_image.png' %}{% endif %}">
            </a>
            <a href="{{ product.get_absolute_url }}">{{ product.name }}</a>
            <br>
            ${{ product.price }}
        </div>
        {% endfor %}
    </div>
</div>

    <style>
        .product-list .images{
            display: flex;
            flex-wrap: wrap;
        }
        .product-list img{
            width: 15em;
            height: 15em;
        }
    </style>
{% endblock %}
